<!DOCTYPE html>
<html>
	<head>
		<tal:block metal:use-macro="../macros.tpl.php/headScripts" />
		<script type="text/javascript">
			jQuery(function($) {
				// on select of team fill the group
			    $(document).on('change', 'select[name=teamId]', function() {
			        $this = $(this);
			        var teamId = $this.val();
			        if( teamId == '' || teamId == 0 ){
			        	document.location = '/team-report/';
			        }else{
				        document.location = '/team-report/nv/tid/' + teamId + '/';
			        }
			    });
			});
		</script>
	</head>
	<body>
		<tal:block metal:use-macro="../macros.tpl.php/header_inner" />
		
		<h1 tal:content="welcomeMsg"></h1>

		<tal:block tal:condition="not: login">
			<center><span style="color:red;">Only login user can view this page. click <a href="/login/">here</a> to login</span></center>
		</tal:block>
		<tal:block tal:condition="login">
			<table align="center" tal:condition="teams">
				<thead>
					<tr>
						<th>Team Expenses Report</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<select name="teamId">
								<!-- <option value="">Select</option> -->
								<option tal:repeat="team teams" tal:attributes="value team/id;selected team/selected">${team/name}</option>										
							</select>
						</td>
					</tr>
				</tbody>
			</table>
			<p></p>
			<table align="center" tal:condition="report">
				<thead>
					<tr>
						<td tal:repeat="rep report" style="font-weight: bold;width:200px;">${rep/user}</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td tal:repeat="rep report" style="font-weight: bold;width:200px;">Rs. ${rep/operator}${rep/money}</td>
					</tr>
				</tbody>
			</table>
		</tal:block>

	    <tal:block metal:use-macro="../macros.tpl.php/footer" />
	</body>
</html>